<template>
  <div class="layoutCon">
    <div class="breadcrumb">
      <router-link class="home" to="/"></router-link>>
      <router-link to="/my">마이페이지</router-link>> 주문/결제내역
    </div>
    <div class="layoutMy">
      <user-center-nav></user-center-nav>
      <div class="myCon">
        <div class="comList">
          <div class="tit">
            <h2>주문/결제내역</h2>
            <p>※ '신청대기' 건만 '결제취소'가 가능합니다.</p>
          </div>
          <div class="loadList" v-loading="pageConfig.loading&&pageConfig.page==1">
            <ul v-if="list.length">
              <li v-for="(item,index) in list" :key="index">
                <div class="time">
                  <em class="red" v-if="item.pay_status==4">취소완료</em>
                  <em class="red" v-else-if="item.pay_status==3">취소요청</em>
                  <em class="red" v-else-if="item.pay_status==0">결제대기</em>
                  <em v-else-if="item.pay_status==1">결제완료</em>
                  {{item.created_at}}
                </div>
                <a href="javascript:;" target="_self" @click="openPage(item.receipt_url)" class="txt l">
                  <strong>{{item.title}}</strong>
                  ({{item.subtitle}})
                </a>
                <div :class="['r','end',item.play_status==0&&'blue']">
                  <span>{{curToThousands(item.price)}}원</span>
                  <el-button
                    type="text"
                    size="mini"
                    v-if="item.pay_status < 3 && item.edit_status < 2 && item.price != 0"
                    :loading="cancelLoading && cancelIndex == index"
                    @click="cancelOrder(item,index)"
                    class="btnCancel"
                  >취소요청</el-button>
                </div>
              </li>
            </ul>
            <div class="notData" v-if="!pageConfig.loading&&list.length==0">데이터 없음</div>
          </div>
          <div class="loadMore" v-if="!pageConfig.isAll">
            <el-button
              type="primary"
              :loading="pageConfig.loading"
              @click="loadMore"
              class="btnMore"
            >더보기</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { myOrder, orderCancel } from '@/api';
import { toThousands } from '@/utils'
import userCenterNav from '@/components/userCenterNav'

export default {
  name: '',
  components: { userCenterNav },
  props: [],
  data () {
    return {
      pageConfig: {
        page: 1,
        per: 10,
        loading: false,
        isAll: true
      },
      cancelLoading: false,
      cancelIndex: '',
      list: []

    }
  },
  computed: {},
  created () {
    this.getList();
  },
  mounted () { },
  methods: {
    async getList () {
      this.pageConfig.loading = true;
      let res = await myOrder({ page: this.pageConfig.page, per: this.pageConfig.per });
      if (res.code == 200) {
        this.pageConfig.page += 1;
        let _arry = res.data.data;
        if (_arry.length) {
          _arry.forEach((o) => {
            o.isOpen = false;
          })
          this.list = [...this.list.concat(_arry)]
        }
        !res.data.next_page_url ? (this.pageConfig.isAll = true) : (this.pageConfig.isAll = false);
        this.pageConfig.loading = false;
      } else {
        this.pageConfig.loading = false;
      }
    },
    loadMore () {
      !this.pageConfig.loading && this.getList();
    },
    curToThousands (num) {
      return toThousands(num)
    },
    openPage (url) {
      url && window.open(url, '_blank');
    },
    cancelOrder (item, index) {
      this.$confirm('취소요청을 진행하시겠습니까?', {
        confirmButtonText: '취소요청',
        cancelButtonText: '아니요',
        type: 'warning'
      }).then(() => {
        this.cancelIndex = index
        this.cancelLoading = true;
        orderCancel({ id: item.id }).then((res) => {
          if (res.code == 200) {
            this.$alert('취소 요청하였습니다. 관리자 검토 후 취소 처리하도록 하겠습니다.', '알림', {
              confirmButtonText: '확인'
            });
            this.cancelLoading = false;
            item.pay_status = 3
          } else {
            this.$alert('결제 취소 요청에 실패하였습니다. 고객센터에 문의해 주시기 바랍니다.', '알림', {
              confirmButtonText: '확인'
            });
            this.cancelLoading = false;
          }
        })
      })
    }
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/my.scss';
</style>
